<template>
  <div class="introduce-app-container">

    <hurdle :showLine="2"></hurdle>

    <div class="introduce-app-banner">
      <img src="./banner.png" class="banner-pic"/>
    </div>

    <div class="introduce-app-advantage">
      <div class="introduce-app-advantage-con">
        <img class="advantage-pic1" src="./b_01_01.png"/>
        <span class="advantage-title">找工作</span>
        <span class="advantage-text">与诚信企业合作，提供大量优质岗位，工作更有保障</span>
      </div>

      <div class="introduce-app-advantage-con">
        <img class="advantage-pic1" src="./b_01_02.png"/>
        <span class="advantage-title">得返费</span>
        <span class="advantage-text">通过蓝聘平台入职，可获取高额返费</span>
      </div>

      <div class="introduce-app-advantage-con">
        <img class="advantage-pic1" src="./b_01_03.png"/>
        <span class="advantage-title">看资讯</span>
        <span class="advantage-text">实时新闻资讯，丰富你的业余生活</span>
      </div>

      <div class="introduce-app-advantage-con">
        <img class="advantage-pic1" src="./b_01_04.png"/>
        <span class="advantage-title">晒心情</span>
        <span class="advantage-text">分享心情评论动态，交更多好友</span>
      </div>

      <div class="introduce-app-advantage-con">
        <img class="advantage-pic1" src="./b_01_05.png"/>
        <span class="advantage-title">记工时</span>
        <span class="advantage-text">每天记录工作考勤，随时预知每月工资</span>
      </div>

      <div class="introduce-app-advantage-con">
        <img class="advantage-pic1" src="./b_01_06.png"/>
        <span class="advantage-title">玩积分</span>
        <span class="advantage-text">签到评论获取积分，积分可兑换成现金</span>
      </div>
    </div>

    <div class="introduce-app-item-box">
      <div class="introduce-app-item-con">
        <div class="introduce-app-item">
          <span class="introduce-app-title">海量优质岗位，高额企业返费</span>
          <span class="introduce-app-text">蓝聘平台与多家口碑良好，诚信可靠的劳务公司合作，提供大量优质的工作岗位，并且根据不同企业的招工要求，设置高额返费。充分保障员工的工作利益。让员工不仅能够找到好工作，还能领双份“工资”。</span>
          <div class="app-key">
            <span>诚信企业</span><span>高额返费</span><span>优质岗位</span>
          </div>
        </div>
        <img src="./b_02_01.png" class="app-item-pic"/>
      </div>
    </div>

    <div class="introduce-app-item-box">
      <div class="introduce-app-item-con">
        <img src="./b_02_02.png" class="app-item-pic"/>
        <div class="introduce-app-item">
          <span class="introduce-app-title">视频资讯，丰富员工业余生活</span>
          <span class="introduce-app-text">蓝聘平台会定时更新看看模块的新闻资讯，在员工工作之余，也能轻松了解社会动态，更有多种类型的趣味搞笑短视频，为您的业余生活增添一份快乐。</span>
          <div class="app-key">
            <span>新闻资讯</span><span>趣味视频</span><span>快乐生活</span>
          </div>
        </div>
      </div>
    </div>
    <div class="introduce-app-item-box">
      <div class="introduce-app-item-con">
        <div class="introduce-app-item">
          <span class="introduce-app-title">四种模式工时记录，随时掌握工作考勤</span>
          <span class="introduce-app-text">多种工时记录模式，全方位满足各种类型的岗位工时记录场景，只需用户每天记录当日的工作情况，系统自动统计当月的工作考勤，并预估当月的工资。解决员工每月核对考勤数据的困难。</span>
          <div class="app-key">
            <span>四大模式</span><span>工作考勤</span><span>工资预估</span>
          </div>
        </div>
        <img src="./b_02_03.png" class="app-item-pic"/>
      </div>
    </div>

    <div class="introduce-app-item-box">
      <div class="introduce-app-item-con">
        <img src="./b_02_04.png" class="app-item-pic"/>
        <div class="introduce-app-item">
          <span class="introduce-app-title">得积分换现金、邀好友领奖励</span>
          <span class="introduce-app-text">每日通过签到、评论等途径可以获取大量蓝聘积分，并且通过积分兑换现金活动，可以将积分兑换成现金进行提现。还可以通过自己的邀请二维码，邀请好友注册入职，获取平台发放高额奖励。</span>
          <div class="app-key">
            <span>积分兑换</span><span>邀请奖励</span><span>邀请好友</span>
          </div>
        </div>
      </div>
    </div>

    <div class="introduce-app-gain-box">
      <div class="introduce-app-gain-con">
        <img src="./b_03_title.png" class="gain-pic1"/>

        <div class="gain-return-fee-desc">
          <div class="gain-return-fee-box">
            <div class="gain-return-fee-type">
              <img src="./b_03_01.png" class="gain-pic2"/>
              <span class="gain-title">报名点赞</span>
            </div>
            <span class="gain-return-fee-text">成功报名后，可分享链接邀请好友为你点赞加油，最多可帮你每月额外获取100元的返费奖励。</span>
          </div>
          <div class="gain-return-fee-box">
            <div class="gain-return-fee-type">
              <img src="./b_03_02.png" class="gain-pic2"/>
              <span class="gain-title">邀请奖励</span>
            </div>
            <div class="gain-return-fee-text">
              <p>1. 好友B通过识别用户A分享的二维码注册成功，并在蓝聘平台上成功入职满一个月后，用户A可获得20元的邀请注册奖励。</p>
              <p>2. 好友B通过识别用户A分享的二维码在蓝聘平台上成功入职，满十五天开始计算直接邀请奖励，满一个月用户A可获得80元的直接邀请奖励，奖励期限为3个月。</p>
              <p>3. 被用户A成功邀请的好友B再邀请另一名好友C在蓝聘平台上成功入职，满十五天开始计算间接邀请奖励，满一个月用户A可获得50元的间接邀请奖励，奖励期限为3个月。</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="introduce-app-platform">
      <span class="platform-cn">使用平台</span>
      <span class="platform-en">USE THE PLATFORM</span>
      <span class="platform-line"></span>

      <div class="app-platform-use">
        <div class="app-platform-port">
          <img src="./b_04_android.png"/>
          <span>Android端</span>
        </div>
        <div class="app-platform-port">
          <img src="./b_04_ios.png"/>
          <span>iOS端</span>
        </div>
        <div class="app-platform-port">
          <img src="./b_04_wechat.png"/>
          <span>微信公众号</span>
        </div>
      </div>

      <span class="app-platform-down-text">更多好玩体验，请下载蓝聘APP</span>
      <img src="./b_04_down.png" class="app-platform-down-pic"/>
    </div>


    <service></service>

    <store-footer></store-footer>

    <back-top></back-top>
  </div>
</template>

<script>
  import hurdle from "../../components/hurdle";
  import service from "../../components/service";
  import storeFooter from "../../components/storeFooter";
  import backTop from "../../components/backTop";

  export default {
    components: {
      hurdle,
      service,
      storeFooter,
      backTop
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/mixin";

  .introduce-app-container {
    .wh(100%, auto);
    position: relative;
    .introduce-app-banner {
      .wh(100%, 540px);
      .banner-pic {
        .wh(100%, 100%);
      }
    }
    .introduce-app-advantage {
      display: flex;
      width: 100%;
      justify-content: center;
      .introduce-app-advantage-con {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 175px;
        margin-right: 32px;
        &:last-child {
          margin-right: 0;
        }
        .advantage-pic1 {
          .wh(100%, 175px);
          transition: All 0.4s ease-in-out;
          -webkit-transition: All 0.4s ease-in-out;
          -moz-transition: All 0.4s ease-in-out;
          -o-transition: All 0.4s ease-in-out;
          &:hover{
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
          }
        }
        .advantage-title {
          padding-bottom: 15px;
          .size-color(18px, #4D4D4D)
        }
        .advantage-text {
          .size-color(14px, #999999);
          text-align: center;
          padding-bottom: 52px;
        }
      }
    }
    .introduce-app-item-box {
      .fj(center, center);
      .wh(100%, 660px);
      &:nth-child(2n){
        background: #FAFAFA;
      }
      .introduce-app-item-con {
        .fj(center, center);
        .wh(1200px, auto);
        .introduce-app-item {
          width: 540px;
          display: flex;
          flex-direction: column;
          .introduce-app-title {
            .size-color(28px, #333333);
          }
          .introduce-app-text {
            padding-top: 39px;
            padding-bottom: 37px;
            .size-color(16px, #999);
            line-height: 18px;
          }
          .app-key {
            display: flex;
            .size-color(20px, #3CAFFF);
            span {
              text-align: center;
              line-height: 32px;
              .wh(96px, 32px);
              border: 1px solid rgba(60, 175, 255, 1);
              border-radius: 2px;
              margin-right: 16px;
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
        .app-item-pic {
          .wh(658px, 658px);
          -webkit-transition: all 0.2s linear;
          -moz-transition: all 0.2s linear;
          -o-transition: all 0.2s linear;
          -ms-transition: all 0.2s linear;
          transition: all 0.2s linear;
          &:hover{
            -webkit-transform: scale(1.1,1.1);
            -moz-transform: scale(1.1,1.1);
            -o-transform: scale(1.1,1.1);
            -ms-transform: scale(1.1,1.1);
            transform: scale(1.1,1.1);
          }
        }
      }
    }
    .introduce-app-gain-box {
      display: flex;
      justify-content: center;
      .wh(100%, 660px);
      .bg-image("../page/introduce/b_03_bg.png");
      .introduce-app-gain-con {
        display: flex;
        flex-direction: column;
        .wh(1200px, auto);
        .gain-pic1 {
          display: flex;
          margin-left: auto;
          margin-bottom: 78px;
          .wh(275px, 94px);
        }
        .gain-return-fee-desc {
          display: flex;
          .gain-return-fee-box {
            .wh(582px, 380px);
            background: #FFF;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
            &:hover{
              transform: translate(0, -10px);
              -webkit-transform: translate(0, -10px);
              -moz-transform: translate(0, -10px);
              -o-transform: translate(0, -10px);
              -ms-transform: translate(0, -10px);
            }
            &:nth-child(1) {
              margin-right: 36px;
            }
            .gain-return-fee-type {
              display: flex;
              width: 460px;
              justify-content: space-between;
              align-items: flex-end;
              margin-bottom: 24px;
              .gain-pic2 {
                .wh(80px, 80px);
                margin-left: 51px;
                margin-top: 38px;
              }
              .gain-title {
                padding-bottom: 8px;
                .size-color(28px, #3CAFFF);
              }
            }
            .gain-return-fee-text {
              width: 460px;
              line-height: 24px;
              .size-color(16px, rgba(77, 77, 77, 1));
            }
          }

        }
      }
    }
    .introduce-app-platform {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(100%, 660px);
      .platform-cn {
        padding-top: 72px;
        .size-color(30px, #434343);
      }
      .platform-en {
        padding-top: 9px;
        padding-bottom: 15px;
        .size-color(14px, #CCC);
      }
      .platform-line {
        margin-bottom: 72px;
        .wh(40px, 4px);
        background: #3CAFFF;
      }
      .app-platform-use {
        display: flex;
        align-items: center;
        margin-bottom: 103px;
        width: 1200px;
        .app-platform-port {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            .wh(120px, 120px);
            animation: app-animation 3s infinite;
          }
          span {
            padding-top: 32px;
            .size-color(18px, #4D4D4D);
          }
        }
      }
      .app-platform-down-text {
        padding-bottom: 38px;
        .size-color-weight(28px, #3CAFFF, 500);
        cursor: pointer;
      }
      .app-platform-down-pic {
        .wh(18px, 36px);
        animation: app-animation 3s infinite;
      }
      @keyframes app-animation {
        0% {
          transform: translate(0px, 0px);
        }
        50% {
          transform: translate(0px, -10px);
        }
        100% {
          transform: translate(0px, 0px);
        }
      }
    }
  }
</style>

